<script setup lang="ts">
//@ts-ignore
import MarkdownIt from "markdown-it";
import "github-markdown-css";
import { ref, nextTick, watch } from "vue";
import {
  type Message,
  type role,
  type status,
  type reference,
} from "../../types/message";
import { replaceId, replaceQuote } from "../../utils/tool";
const messageList = ref<Message[]>([]);
/**
 * 添加消息
 * @param content 消息内容
 * @param role 消息角色 assistant | user
 * @param status 消息状态 normal | thinking | error
 * @param index 消息索引
 */
const addMessage = (
  content: string,
  role: role = "assistant",
  status: status = "normal",
  index: number = -1
): number => {
  if (index >= 0 && index < messageList.value.length) {
    const message = messageList.value[index];
    if (message.status === "thinking") {
      message.content = ""; // 清空内容
    }
    message.content += content;
    message.status = status;
    scrollToBottom();
    return index;
  }

  const position = messageList.value.length;
  const newMessage: Message = {
    id: Date.now() + position, // 使用时间戳确保唯一性
    content,
    role,
    status: status || "normal",
  };

  messageList.value.push(newMessage);
  scrollToBottom();
  return position;
};
const insertReference = (index: number, referenceData: reference[]) => {
  if (index >= 0 && index < messageList.value.length) {
    const message = messageList.value[index];
    message.referenceData = referenceData;
  } else {
    console.error("⚠️：插入引用数据失败");
  }
};

const insertRecommendedQuestions = (index: number, questions: string[]) => {
  if (index >= 0 && index < messageList.value.length) {
    const message = messageList.value[index];
    message.recommendedQuestions = questions;
  } else {
    console.error("⚠️：插入推荐问题失败");
  }
};

const handleQuestionClick = (question: string) => {
  emit("sendMessage", question);
};

const clearMessages = () => {
  messageList.value = [];
};

const messageContainer = ref<HTMLDivElement | null>(null);
const userScrolled = ref<boolean>(false);

const handleScroll = () => {
  if (messageContainer.value) {
    // 如果滚动位置距离底部超过10px，认为用户正在查看历史消息
    const isScrolledToBottom =
      messageContainer.value.scrollHeight -
        messageContainer.value.scrollTop -
        messageContainer.value.clientHeight <
      10;
    userScrolled.value = !isScrolledToBottom;
  }
};

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messageContainer.value && !userScrolled.value) {
      messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
    }
  });
};

const loadMessages = (messages: Message[]) => {
  messageList.value = messages;
  scrollToBottom();
};

defineExpose({
  messageList,
  addMessage,
  clearMessages,
  scrollToBottom,
  loadMessages,
  insertReference,
  insertRecommendedQuestions,
});
const markdown = new MarkdownIt();
const returnHtml = (content: string, referenceData: any) => {
  return replaceQuote(
    markdown.render(replaceId(content, referenceData)),
    referenceData
  );
};
defineProps({
  inputMode: {
    type: String,
    default: "text", // 可以是 'text' 或 'voice'
  },
  isRecording: {
    type: Boolean,
    default: false,
  },
});
const inputText = ref("");

const emit = defineEmits([
  "update:modelValue",
  "switchInputMode",
  "sendMessage",
]);
const handleInput = (event: Event) => {
  emit("update:modelValue", (event.target as HTMLInputElement).value);
};
const handleSendMessage = () => {
  emit("sendMessage", inputText.value);
  inputText.value = "";
};

const handleSwitchToVoice = () => {
  emit("switchInputMode", "voice");
};

const handleSwitchToText = () => {
  emit("switchInputMode", "text");
};

// 监听消息列表变化,重新设置提示框定位
watch(
  () => messageList.value,
  () => {
    scrollToBottom();
  },
  { deep: true }
);
</script>
<template>
  <div class="message-container">
    <div class="message-list" ref="messageContainer" @scroll="handleScroll">
      <!-- 消息列表 -->
      <div
        class="message"
        :class="[item.role, item.status]"
        v-for="item in messageList"
        :key="item.id"
      >
        <!-- 助手消息 -->
        <template v-if="item.role === 'assistant'">
          <div class="header">
            <div class="status">
              <!-- 正常状态 - 绿色 -->
              <svg
                v-if="item.status === 'normal'"
                xmlns="http://www.w3.org/2000/svg"
                width="28"
                height="28"
                viewBox="0 0 28 28"
                fill="none"
              >
                <g filter="url(#filter0_d_739_4762)">
                  <circle cx="14" cy="14" r="4" fill="#00FF66" />
                </g>
                <defs>
                  <filter
                    id="filter0_d_739_4762"
                    x="0"
                    y="0"
                    width="28"
                    height="28"
                    filterUnits="userSpaceOnUse"
                    color-interpolation-filters="sRGB"
                  >
                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                    <feColorMatrix
                      in="SourceAlpha"
                      type="matrix"
                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                      result="hardAlpha"
                    />
                    <feMorphology
                      radius="2"
                      operator="dilate"
                      in="SourceAlpha"
                      result="effect1_dropShadow_739_4762"
                    />
                    <feOffset />
                    <feGaussianBlur stdDeviation="4" />
                    <feComposite in2="hardAlpha" operator="out" />
                    <feColorMatrix
                      type="matrix"
                      values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.4 0 0 0 0.5 0"
                    />
                    <feBlend
                      mode="normal"
                      in2="BackgroundImageFix"
                      result="effect1_dropShadow_739_4762"
                    />
                    <feBlend
                      mode="normal"
                      in="SourceGraphic"
                      in2="effect1_dropShadow_739_4762"
                      result="shape"
                    />
                  </filter>
                </defs>
              </svg>

              <!-- 思考状态 - 黄色 -->
              <svg
                v-else-if="item.status === 'thinking'"
                xmlns="http://www.w3.org/2000/svg"
                width="28"
                height="28"
                viewBox="0 0 28 28"
                fill="none"
              >
                <g filter="url(#filter0_d_thinking)">
                  <circle cx="14" cy="14" r="4" fill="#FFD700" />
                </g>
                <defs>
                  <filter
                    id="filter0_d_thinking"
                    x="0"
                    y="0"
                    width="28"
                    height="28"
                    filterUnits="userSpaceOnUse"
                    color-interpolation-filters="sRGB"
                  >
                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                    <feColorMatrix
                      in="SourceAlpha"
                      type="matrix"
                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                      result="hardAlpha"
                    />
                    <feMorphology
                      radius="2"
                      operator="dilate"
                      in="SourceAlpha"
                      result="effect1_dropShadow_thinking"
                    />
                    <feOffset />
                    <feGaussianBlur stdDeviation="4" />
                    <feComposite in2="hardAlpha" operator="out" />
                    <feColorMatrix
                      type="matrix"
                      values="0 0 0 0 1 0 0 0 0 0.84 0 0 0 0 0 0 0 0 0.5 0"
                    />
                    <feBlend
                      mode="normal"
                      in2="BackgroundImageFix"
                      result="effect1_dropShadow_thinking"
                    />
                    <feBlend
                      mode="normal"
                      in="SourceGraphic"
                      in2="effect1_dropShadow_thinking"
                      result="shape"
                    />
                  </filter>
                </defs>
              </svg>

              <!-- 错误状态 - 红色 -->
              <svg
                v-else-if="item.status === 'error'"
                xmlns="http://www.w3.org/2000/svg"
                width="28"
                height="28"
                viewBox="0 0 28 28"
                fill="none"
              >
                <g filter="url(#filter0_d_error)">
                  <circle cx="14" cy="14" r="4" fill="#FF4444" />
                </g>
                <defs>
                  <filter
                    id="filter0_d_error"
                    x="0"
                    y="0"
                    width="28"
                    height="28"
                    filterUnits="userSpaceOnUse"
                    color-interpolation-filters="sRGB"
                  >
                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                    <feColorMatrix
                      in="SourceAlpha"
                      type="matrix"
                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                      result="hardAlpha"
                    />
                    <feMorphology
                      radius="2"
                      operator="dilate"
                      in="SourceAlpha"
                      result="effect1_dropShadow_error"
                    />
                    <feOffset />
                    <feGaussianBlur stdDeviation="4" />
                    <feComposite in2="hardAlpha" operator="out" />
                    <feColorMatrix
                      type="matrix"
                      values="0 0 0 0 1 0 0 0 0 0.27 0 0 0 0 0.27 0 0 0 0.5 0"
                    />
                    <feBlend
                      mode="normal"
                      in2="BackgroundImageFix"
                      result="effect1_dropShadow_error"
                    />
                    <feBlend
                      mode="normal"
                      in="SourceGraphic"
                      in2="effect1_dropShadow_error"
                      result="shape"
                    />
                  </filter>
                </defs>
              </svg>
            </div>
            <div class="name">小诺:</div>
          </div>

          <!-- 思考状态提示 -->
          <div
            v-if="item.status === 'thinking'"
            class="content thinking-content"
          >
            <span class="thinking-dots">正在思考中</span>
          </div>

          <!-- 错误状态提示 -->
          <div
            v-else-if="item.status === 'error'"
            class="content error-content"
          >
            <span class="error-text">{{
              item.content || "抱歉,出现了一些问题,请稍后再试"
            }}</span>
          </div>

          <!-- 正常内容 -->
          <div
            v-else
            class="content markdown-body"
            v-html="returnHtml(item.content, item.referenceData)"
          ></div>

          <!-- 引用数据 -->
          <div
            v-if="item.referenceData && item.referenceData.length > 0"
            class="reference-list"
          >
            <div class="reference-title">参考资料:</div>
            <div
              v-for="(ref, index) in item.referenceData"
              :key="index"
              class="reference-item"
            >
              {{ ref.document_keyword }}
            </div>
          </div>

          <!-- 推荐问题 -->
          <div
            v-if="
              item.recommendedQuestions && item.recommendedQuestions.length > 0
            "
            class="recommended-questions"
          >
            <div class="questions-title">
              <span class="title-text">您可能还想了解:</span>
            </div>
            <div class="questions-list">
              <div
                v-for="(question, qIndex) in item.recommendedQuestions"
                :key="qIndex"
                class="question-item"
                @click="handleQuestionClick(question)"
              >
                <div class="question-icon">?</div>
                <div class="question-text">{{ question }}</div>
              </div>
            </div>
          </div>
        </template>

        <!-- 用户消息 -->
        <template v-else-if="item.role === 'user'">
          <div class="content user-content">{{ item.content }}</div>
        </template>
      </div>
    </div>
    <div class="message-footer">
      <!-- 文本输入模式 -->
      <template v-if="inputMode === 'text'">
        <input
          class="input"
          type="text"
          v-model.trim="inputText"
          @input="handleInput"
          @keyup.enter="handleSendMessage"
        />
        <div class="button-group">
          <div class="icon" @click="handleSwitchToVoice">
            <svg
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g filter="url(#filter0_d_739_4789)">
                <mask id="path-1-inside-1_739_4789" fill="white">
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M13.555 8.62081C13.555 10.5761 11.9553 12.1758 10 12.1758C8.04478 12.1758 6.44503 10.5761 6.44503 8.62081V4.3548C6.44503 2.39955 8.04478 0.799805 10 0.799805C11.9553 0.799805 13.555 2.39955 13.555 4.3548V8.62081ZM15.7302 8.79632C16.1191 8.85631 16.3835 9.21848 16.3235 9.60731C15.8747 12.5069 13.5661 14.6665 10.711 14.9776V17.1528H12.844C13.2373 17.1528 13.555 17.4705 13.555 17.8638C13.555 18.2571 13.2373 18.5748 12.844 18.5748H7.15603C6.76276 18.5748 6.44503 18.2571 6.44503 17.8638C6.44503 17.4705 6.76276 17.1528 7.15603 17.1528H9.28903V14.9776C6.4317 14.6665 4.1254 12.5046 3.67658 9.60508C3.61659 9.21626 3.88099 8.85409 4.26982 8.7941C4.65642 8.73411 5.02081 8.99851 5.0808 9.38734C5.45186 11.787 7.56708 13.5978 10 13.5978C12.433 13.5978 14.546 11.7892 14.9193 9.38956C14.9793 9.00296 15.3414 8.73855 15.7302 8.79632Z"
                  />
                </mask>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M13.555 8.62081C13.555 10.5761 11.9553 12.1758 10 12.1758C8.04478 12.1758 6.44503 10.5761 6.44503 8.62081V4.3548C6.44503 2.39955 8.04478 0.799805 10 0.799805C11.9553 0.799805 13.555 2.39955 13.555 4.3548V8.62081ZM15.7302 8.79632C16.1191 8.85631 16.3835 9.21848 16.3235 9.60731C15.8747 12.5069 13.5661 14.6665 10.711 14.9776V17.1528H12.844C13.2373 17.1528 13.555 17.4705 13.555 17.8638C13.555 18.2571 13.2373 18.5748 12.844 18.5748H7.15603C6.76276 18.5748 6.44503 18.2571 6.44503 17.8638C6.44503 17.4705 6.76276 17.1528 7.15603 17.1528H9.28903V14.9776C6.4317 14.6665 4.1254 12.5046 3.67658 9.60508C3.61659 9.21626 3.88099 8.85409 4.26982 8.7941C4.65642 8.73411 5.02081 8.99851 5.0808 9.38734C5.45186 11.787 7.56708 13.5978 10 13.5978C12.433 13.5978 14.546 11.7892 14.9193 9.38956C14.9793 9.00296 15.3414 8.73855 15.7302 8.79632Z"
                  fill="url(#paint0_linear_739_4789)"
                />
                <path
                  d="M16.3235 9.60731L17.1141 9.72968L17.1141 9.72929L16.3235 9.60731ZM15.7302 8.79632L15.8522 8.00566L15.8478 8.00501L15.7302 8.79632ZM10.711 14.9776L10.6244 14.1823L9.91103 14.26V14.9776H10.711ZM10.711 17.1528H9.91103V17.9528H10.711V17.1528ZM9.28903 17.1528V17.9528H10.089V17.1528H9.28903ZM9.28903 14.9776H10.089V14.2599L9.37561 14.1823L9.28903 14.9776ZM3.67658 9.60508L2.88593 9.72707L2.88599 9.72746L3.67658 9.60508ZM4.26982 8.7941L4.3918 9.58474L4.39249 9.58464L4.26982 8.7941ZM5.0808 9.38734L4.29016 9.50933L4.2902 9.50959L5.0808 9.38734ZM14.9193 9.38956L15.7098 9.51253L15.7098 9.51223L14.9193 9.38956ZM10 12.9758C12.3971 12.9758 14.355 11.0179 14.355 8.62081H12.755C12.755 10.1342 11.5135 11.3758 10 11.3758V12.9758ZM5.64503 8.62081C5.64503 11.0179 7.60295 12.9758 10 12.9758V11.3758C8.48661 11.3758 7.24503 10.1342 7.24503 8.62081H5.64503ZM5.64503 4.3548V8.62081H7.24503V4.3548H5.64503ZM10 -0.000195324C7.60295 -0.000195324 5.64503 1.95773 5.64503 4.3548H7.24503C7.24503 2.84138 8.48661 1.5998 10 1.5998V-0.000195324ZM14.355 4.3548C14.355 1.95773 12.3971 -0.000195324 10 -0.000195324V1.5998C11.5135 1.5998 12.755 2.84138 12.755 4.3548H14.355ZM14.355 8.62081V4.3548H12.755V8.62081H14.355ZM17.1141 9.72929C17.2413 8.90537 16.6793 8.13328 15.8522 8.00568L15.6083 9.58697C15.5589 9.57934 15.5257 9.53159 15.5328 9.48532L17.1141 9.72929ZM10.7977 15.7729C14.0089 15.423 16.6093 12.9907 17.1141 9.72968L15.5329 9.48493C15.14 12.0231 13.1233 13.91 10.6244 14.1823L10.7977 15.7729ZM11.511 17.1528V14.9776H9.91103V17.1528H11.511ZM12.844 16.3528H10.711V17.9528H12.844V16.3528ZM14.355 17.8638C14.355 17.0287 13.6791 16.3528 12.844 16.3528V17.9528C12.7955 17.9528 12.755 17.9123 12.755 17.8638H14.355ZM12.844 19.3748C13.6791 19.3748 14.355 18.6989 14.355 17.8638H12.755C12.755 17.8152 12.7955 17.7748 12.844 17.7748V19.3748ZM7.15603 19.3748H12.844V17.7748H7.15603V19.3748ZM5.64503 17.8638C5.64503 18.6989 6.32093 19.3748 7.15603 19.3748V17.7748C7.20459 17.7748 7.24503 17.8152 7.24503 17.8638H5.64503ZM7.15603 16.3528C6.32093 16.3528 5.64503 17.0287 5.64503 17.8638H7.24503C7.24503 17.9123 7.20459 17.9528 7.15603 17.9528V16.3528ZM9.28903 16.3528H7.15603V17.9528H9.28903V16.3528ZM8.48903 14.9776V17.1528H10.089V14.9776H8.48903ZM2.88599 9.72746C3.39066 12.9878 5.98831 15.423 9.20245 15.7729L9.37561 14.1823C6.8751 13.9101 4.86013 12.0214 4.46716 9.48271L2.88599 9.72746ZM4.14783 8.00345C3.32078 8.13106 2.75881 8.90314 2.88593 9.72707L4.46722 9.4831C4.47436 9.52937 4.4412 9.57712 4.3918 9.58474L4.14783 8.00345ZM5.87145 9.26535C5.7437 8.43733 4.96836 7.87613 4.14715 8.00356L4.39249 9.58464C4.34449 9.59209 4.29793 9.55969 4.29016 9.50933L5.87145 9.26535ZM10 12.7978C7.96066 12.7978 6.182 11.2737 5.87141 9.26509L4.2902 9.50959C4.72171 12.3002 7.1735 14.3978 10 14.3978V12.7978ZM14.1288 9.2666C13.8162 11.2759 12.0393 12.7978 10 12.7978V14.3978C12.8266 14.3978 15.2758 12.3025 15.7098 9.51253L14.1288 9.2666ZM15.8478 8.00501C15.029 7.88336 14.2569 8.44062 14.1287 9.26689L15.7098 9.51223C15.7016 9.5653 15.6538 9.59375 15.6127 9.58764L15.8478 8.00501Z"
                  fill="url(#paint1_linear_739_4789)"
                  mask="url(#path-1-inside-1_739_4789)"
                />
              </g>
              <defs>
                <filter
                  id="filter0_d_739_4789"
                  x="-0.331909"
                  y="-1.2002"
                  width="20.6639"
                  height="25.7749"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feColorMatrix
                    in="SourceAlpha"
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    result="hardAlpha"
                  />
                  <feOffset dy="2" />
                  <feGaussianBlur stdDeviation="2" />
                  <feComposite in2="hardAlpha" operator="out" />
                  <feColorMatrix
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
                  />
                  <feBlend
                    mode="normal"
                    in2="BackgroundImageFix"
                    result="effect1_dropShadow_739_4789"
                  />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="effect1_dropShadow_739_4789"
                    result="shape"
                  />
                </filter>
                <linearGradient
                  id="paint0_linear_739_4789"
                  x1="15.6242"
                  y1="11.5725"
                  x2="4.93816"
                  y2="11.5725"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#64B2EC" />
                  <stop offset="1" stop-color="white" />
                </linearGradient>
                <linearGradient
                  id="paint1_linear_739_4789"
                  x1="4.77746"
                  y1="17.5873"
                  x2="15.7447"
                  y2="17.5873"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="white" />
                  <stop offset="1" stop-color="white" stop-opacity="0" />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div class="icon" @click="handleSendMessage">
            <svg
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g filter="url(#filter0_d_739_4794)">
                <path
                  d="M6.07506 13.52L1.90006 11.691C1.77408 11.6358 1.66593 11.5466 1.58764 11.4335C1.50934 11.3204 1.46399 11.1878 1.45663 11.0504C1.44927 10.913 1.48019 10.7763 1.54595 10.6555C1.6117 10.5346 1.70971 10.4344 1.82906 10.366L17.4381 1.43103C17.5579 1.36248 17.6945 1.32869 17.8325 1.33345C17.9705 1.33821 18.1044 1.38133 18.2193 1.45797C18.3342 1.53461 18.4254 1.64174 18.4828 1.76734C18.5401 1.89293 18.5613 2.03203 18.5441 2.16903L16.6801 16.931C16.6655 17.0474 16.6236 17.1586 16.5578 17.2556C16.4919 17.3527 16.404 17.4327 16.3013 17.4892C16.1986 17.5457 16.0839 17.577 15.9667 17.5807C15.8495 17.5843 15.7331 17.5601 15.6271 17.51L11.2611 15.456L9.20006 18.319C9.09684 18.4626 8.95071 18.5697 8.78271 18.6249C8.61471 18.6801 8.43353 18.6806 8.26526 18.6262C8.097 18.5718 7.95035 18.4654 7.84643 18.3223C7.74252 18.1792 7.68671 18.0069 7.68706 17.83L7.70006 14.108L15.2731 5.22102L6.07506 13.52Z"
                  fill="url(#paint0_linear_739_4794)"
                />
                <path
                  d="M17.8188 1.7334C17.8825 1.73562 17.9446 1.75566 17.9976 1.79102C18.0504 1.82638 18.0922 1.87575 18.1187 1.93359C18.1451 1.99157 18.155 2.0559 18.147 2.11914L16.2837 16.8809L16.2827 16.8818C16.276 16.9353 16.2573 16.9867 16.2271 17.0312C16.1968 17.0759 16.1561 17.1126 16.1089 17.1387C16.0616 17.1647 16.0085 17.179 15.9546 17.1807C15.9277 17.1815 15.9007 17.1792 15.8745 17.1738L15.7974 17.1484L11.4312 15.0938L11.1304 14.9521L10.936 15.2227L8.87549 18.085V18.0859C8.82172 18.1607 8.74518 18.2164 8.65771 18.2451C8.57025 18.2738 8.47578 18.2734 8.38818 18.2451C8.30062 18.2168 8.2245 18.1614 8.17041 18.0869C8.12987 18.0311 8.10293 17.9669 8.09229 17.8994L8.0874 17.8311L8.09912 14.2549L15.5776 5.48047L15.0054 4.92383L5.99854 13.0488L2.06006 11.3242C2.00229 11.2987 1.95248 11.258 1.9165 11.2061C1.88042 11.1539 1.85941 11.0926 1.85596 11.0293C1.85256 10.9659 1.86667 10.9024 1.89697 10.8467C1.91221 10.8187 1.93151 10.7931 1.95361 10.7705L2.02783 10.7129L17.6362 1.77734C17.6915 1.74574 17.7552 1.7312 17.8188 1.7334Z"
                  stroke="url(#paint1_linear_739_4794)"
                  stroke-width="0.8"
                />
              </g>
              <defs>
                <filter
                  id="filter0_d_739_4794"
                  x="-2.54443"
                  y="-0.666992"
                  width="25.0944"
                  height="25.3335"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feColorMatrix
                    in="SourceAlpha"
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    result="hardAlpha"
                  />
                  <feOffset dy="2" />
                  <feGaussianBlur stdDeviation="2" />
                  <feComposite in2="hardAlpha" operator="out" />
                  <feColorMatrix
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
                  />
                  <feBlend
                    mode="normal"
                    in2="BackgroundImageFix"
                    result="effect1_dropShadow_739_4794"
                  />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="effect1_dropShadow_739_4794"
                    result="shape"
                  />
                </filter>
                <linearGradient
                  id="paint0_linear_739_4794"
                  x1="17.5945"
                  y1="11.8382"
                  x2="3.16996"
                  y2="11.8382"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#64B2EC" />
                  <stop offset="1" stop-color="white" />
                </linearGradient>
                <linearGradient
                  id="paint1_linear_739_4794"
                  x1="2.95305"
                  y1="17.7037"
                  x2="17.7572"
                  y2="17.7037"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="white" />
                  <stop offset="1" stop-color="white" stop-opacity="0" />
                </linearGradient>
              </defs>
            </svg>
          </div>
        </div>
      </template>

      <!-- 语音输入模式 -->
      <template v-else>
        <div class="recording-container">
          <div class="recording-indicator">
            <div class="recording-pulse">
              <div class="pulse-ring pulse-ring-1"></div>
              <div class="pulse-ring pulse-ring-2"></div>
              <div class="pulse-ring pulse-ring-3"></div>
              <div class="pulse-core"></div>
            </div>
            <div class="recording-info">
              <span class="recording-text">正在录音中</span>
              <div class="recording-wave">
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
                <div class="wave-bar"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="button-group">
          <div class="icon" @click="handleSwitchToText">
            <svg
              width="25"
              height="25"
              viewBox="0 0 20 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g filter="url(#filter0_d_keyboard)">
                <rect
                  x="2"
                  y="4"
                  width="16"
                  height="11"
                  rx="2"
                  fill="url(#paint0_linear_keyboard)"
                />
                <rect
                  x="2"
                  y="4"
                  width="16"
                  height="11"
                  rx="2"
                  stroke="url(#paint1_linear_keyboard)"
                  stroke-width="0.8"
                />
                <!-- 键盘按键 -->
                <rect
                  x="3.5"
                  y="5.5"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />
                <rect
                  x="5.8"
                  y="5.5"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />
                <rect
                  x="8.1"
                  y="5.5"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />
                <rect
                  x="10.4"
                  y="5.5"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />
                <rect
                  x="12.7"
                  y="5.5"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />
                <rect
                  x="15"
                  y="5.5"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />

                <rect
                  x="3.5"
                  y="7.8"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />
                <rect
                  x="5.8"
                  y="7.8"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />
                <rect
                  x="8.1"
                  y="7.8"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />
                <rect
                  x="10.4"
                  y="7.8"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />
                <rect
                  x="12.7"
                  y="7.8"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />
                <rect
                  x="15"
                  y="7.8"
                  width="1.8"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />

                <!-- 空格键 -->
                <rect
                  x="5.8"
                  y="10.1"
                  width="8.4"
                  height="1.8"
                  rx="0.3"
                  fill="white"
                  opacity="0.8"
                />
              </g>
              <defs>
                <filter
                  id="filter0_d_keyboard"
                  x="0"
                  y="2"
                  width="20"
                  height="17"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feColorMatrix
                    in="SourceAlpha"
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    result="hardAlpha"
                  />
                  <feOffset dy="2" />
                  <feGaussianBlur stdDeviation="2" />
                  <feComposite in2="hardAlpha" operator="out" />
                  <feColorMatrix
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
                  />
                  <feBlend
                    mode="normal"
                    in2="BackgroundImageFix"
                    result="effect1_dropShadow_keyboard"
                  />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="effect1_dropShadow_keyboard"
                    result="shape"
                  />
                </filter>
                <linearGradient
                  id="paint0_linear_keyboard"
                  x1="3"
                  y1="10"
                  x2="25"
                  y2="10"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#64B2EC" />
                  <stop offset="1" stop-color="white" />
                </linearGradient>
                <linearGradient
                  id="paint1_linear_keyboard"
                  x1="3"
                  y1="15"
                  x2="17"
                  y2="15"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="white" />
                  <stop offset="1" stop-color="white" stop-opacity="0" />
                </linearGradient>
              </defs>
            </svg>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<style scoped lang="scss">
.message-footer {
  display: flex;
  height: 50px;
  padding: 10px;
  align-items: center;
  gap: 8px;
  border-radius: 24px;
  border: 1px solid #62fcff;
  background: rgba(15, 33, 71, 0.33);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 0 8px 0 #0f2147 inset;

  .input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    color: #fff;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: transparent;
    border: none;
    outline: none;
  }

  .recording-container {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    justify-content: center;
    padding: 0 20px;

    .recording-indicator {
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;

      .recording-pulse {
        position: relative;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;

        .pulse-ring {
          position: absolute;
          border-radius: 50%;
          border: 2px solid rgba(49, 190, 255, 0.6);
          animation: pulseRing 2s ease-out infinite;

          &.pulse-ring-1 {
            width: 28px;
            height: 28px;
            animation-delay: 0s;
          }

          &.pulse-ring-2 {
            width: 28px;
            height: 28px;
            animation-delay: 0.7s;
          }

          &.pulse-ring-3 {
            width: 28px;
            height: 28px;
            animation-delay: 1.4s;
          }
        }

        .pulse-core {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: linear-gradient(
            135deg,
            rgba(49, 190, 255, 0.9) 0%,
            rgba(49, 190, 255, 0.7) 100%
          );
          box-shadow: 0 0 20px rgba(49, 190, 255, 0.6),
            0 0 40px rgba(49, 190, 255, 0.3);
          animation: coreGlow 1.5s ease-in-out infinite;
          z-index: 1;
        }
      }

      .recording-info {
        display: flex;
        gap: 6px;

        .recording-text {
          color: #31beff;
          font-family: "Alibaba PuHuiTi", "PingFang SC", sans-serif;
          font-size: 14px;
          font-weight: 600;
          letter-spacing: 0.5px;
          animation: textPulse 1.5s ease-in-out infinite;
        }

        .recording-wave {
          display: flex;
          align-items: center;
          gap: 3px;
          height: 20px;

          .wave-bar {
            width: 3px;
            background: linear-gradient(
              to top,
              rgba(49, 190, 255, 0.8) 0%,
              rgba(49, 190, 255, 0.4) 100%
            );
            border-radius: 2px;
            animation: wave 1s ease-in-out infinite;

            &:nth-child(1) {
              animation-delay: 0s;
            }
            &:nth-child(2) {
              animation-delay: 0.15s;
            }
            &:nth-child(3) {
              animation-delay: 0.3s;
            }
            &:nth-child(4) {
              animation-delay: 0.45s;
            }
            &:nth-child(5) {
              animation-delay: 0.6s;
            }
          }
        }
      }
    }
  }

  .button-group {
    display: flex;
    align-items: center;
    gap: 8px;
    .icon {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(
        180deg,
        #00a3ff 0%,
        rgba(0, 81, 168, 0.5) 100%
      );
      &:hover {
        transform: translateY(-2px);
        filter: brightness(1.2);
      }
    }
  }
}
.message-container {
  position: relative;
  background: url("/src/assets/images/chat.png") no-repeat;
  background-size: 100% 100%; /* 完全拉伸填充 */
  padding: 90px 30px 80px 30px;
  width: 580px;
  height: 100vh;
  overflow: hidden;
  .header {
    display: flex;
    align-items: center;
    gap: 8px;
    .status {
      width: 20px;
      height: 28px;
    }
  }
  .message-list {
    height: 730px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-right: 10px;
    padding-bottom: 10px;

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(49, 190, 255, 0.05);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(49, 190, 255, 0.3);
      border-radius: 4px;

      &:hover {
        background: rgba(49, 190, 255, 0.5);
      }
    }

    .message {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0;
      border-radius: 0;
      transition: all 0.3s ease;
      animation: messageSlideIn 0.3s ease-out;

      @keyframes messageSlideIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .header {
        display: flex;
        align-items: center;
        gap: 8px;

        .status {
          width: 28px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .name {
          color: #fff;
          font-family: "PingFang SC";
          font-size: 16px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
        }
      }

      .content {
        color: #eff8fc;
        font-family: "Alibaba PuHuiTi", "PingFang SC", sans-serif;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.6;
        word-wrap: break-word;
        padding: 14px 18px;
        border-radius: 12px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-1px);
        }
      }

      // 助手消息样式
      &.assistant {
        .content {
          background: linear-gradient(
            135deg,
            rgba(49, 190, 255, 0.08) 0%,
            rgba(49, 190, 255, 0.03) 100%
          );
          border: 1px solid rgba(49, 190, 255, 0.2);
          color: rgba(246, 249, 254, 0.9);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

          &:hover {
            box-shadow: 0 6px 16px rgba(49, 190, 255, 0.25);
          }
        }
        // 思考状态
        .thinking-content {
          color: #ffd700;
          font-style: italic;
          background: linear-gradient(
            135deg,
            rgba(255, 215, 0, 0.08) 0%,
            rgba(255, 215, 0, 0.03) 100%
          );
          border: 1px solid rgba(255, 215, 0, 0.3);
          box-shadow: 0 4px 12px rgba(255, 215, 0, 0.1);

          .thinking-dots {
            position: relative;
            display: inline-block;

            &::after {
              content: "...";
              position: absolute;
              animation: thinking 1.5s infinite;
            }
          }
        }

        // 错误状态
        .error-content {
          color: #ff6b6b;
          background: linear-gradient(
            135deg,
            rgba(255, 68, 68, 0.08) 0%,
            rgba(255, 68, 68, 0.03) 100%
          );
          border: 1px solid rgba(255, 68, 68, 0.3);
          box-shadow: 0 4px 12px rgba(255, 68, 68, 0.1);

          .error-text {
            display: flex;
            align-items: center;
            gap: 6px;
          }
        }

        // 引用数据
        .reference-list {
          margin-top: 8px;
          padding: 12px 16px;
          background: linear-gradient(
            135deg,
            rgba(49, 190, 255, 0.08) 0%,
            rgba(49, 190, 255, 0.03) 100%
          );
          border-left: 3px solid rgba(49, 190, 255, 0.5);
          border-radius: 6px;
          max-height: 180px;
          overflow-y: auto;
          backdrop-filter: blur(10px);
          box-shadow: 0 2px 8px rgba(49, 190, 255, 0.1);

          &::-webkit-scrollbar {
            width: 6px;
          }

          &::-webkit-scrollbar-track {
            background: rgba(49, 190, 255, 0.05);
            border-radius: 3px;
          }

          &::-webkit-scrollbar-thumb {
            background: rgba(49, 190, 255, 0.3);
            border-radius: 3px;

            &:hover {
              background: rgba(49, 190, 255, 0.5);
            }
          }

          .reference-title {
            color: #31beff;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            font-family: "Alibaba PuHuiTi", sans-serif;
          }

          .reference-item {
            color: rgba(246, 249, 254, 0.9);
            font-size: 13px;
            padding: 4px 16px;
            position: relative;
            font-family: "Alibaba PuHuiTi", sans-serif;
            line-height: 1.5;

            &::before {
              content: "•";
              position: absolute;
              left: 0;
              color: #31beff;
            }
          }
        }

        // 推荐问题
        .recommended-questions {
          margin-top: 12px;
          padding: 12px;
          background: rgba(98, 252, 255, 0.05);
          border: 1px solid rgba(49, 190, 255, 0.2);
          border-radius: 8px;
          backdrop-filter: blur(5px);

          .questions-title {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(49, 190, 255, 0.15);

            .title-text {
              color: #62fcff;
              font-family: "PingFang SC";
              font-size: 14px;
              font-weight: 600;
              opacity: 0.9;
            }
          }

          .questions-list {
            display: flex;
            flex-direction: column;
            gap: 8px;

            .question-item {
              background: linear-gradient(
                135deg,
                rgba(49, 190, 255, 0.08) 0%,
                rgba(49, 190, 255, 0.03) 100%
              );
              border: 1px solid rgba(49, 190, 255, 0.2);
              border-radius: 6px;
              padding: 10px 12px;
              display: flex;
              align-items: center;
              gap: 8px;
              cursor: pointer;
              transition: all 0.25s ease;

              &:hover {
                border-color: rgba(49, 190, 255, 0.4);
                background: linear-gradient(
                  135deg,
                  rgba(49, 190, 255, 0.12) 0%,
                  rgba(49, 190, 255, 0.06) 100%
                );
                transform: translateX(3px);
                box-shadow: 0 2px 8px rgba(49, 190, 255, 0.2);
              }

              &:active {
                transform: translateX(3px) scale(0.98);
              }

              .question-icon {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                background: linear-gradient(
                  135deg,
                  rgba(49, 190, 255, 0.25) 0%,
                  rgba(49, 190, 255, 0.12) 100%
                );
                border: 1px solid rgba(49, 190, 255, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #31beff;
                font-size: 14px;
                font-weight: bold;
                flex-shrink: 0;
                transition: all 0.25s ease;
              }

              &:hover .question-icon {
                background: linear-gradient(
                  135deg,
                  rgba(49, 190, 255, 0.4) 0%,
                  rgba(49, 190, 255, 0.25) 100%
                );
                transform: rotate(15deg) scale(1.05);
                box-shadow: 0 0 10px rgba(49, 190, 255, 0.3);
              }

              .question-text {
                flex: 1;
                color: #eff8fc;
                font-family: "PingFang SC";
                font-size: 13px;
                font-weight: 400;
                line-height: 1.4;
                opacity: 0.85;
                transition: all 0.25s ease;
              }

              &:hover .question-text {
                opacity: 1;
                color: #ffffff;
              }
            }
          }
        }
      }

      // 用户消息样式
      &.user {
        align-self: flex-end;
        max-width: 80%;

        .user-content {
          padding: 14px 18px;
          background: linear-gradient(
            135deg,
            rgba(49, 190, 255, 0.25) 0%,
            rgba(49, 190, 255, 0.15) 100%
          );
          border: 1px solid rgba(49, 190, 255, 0.3);
          border-radius: 12px;
          color: #f6f9fe;
          text-align: left;
          font-family: "Alibaba PuHuiTi", "PingFang SC", sans-serif;
          font-size: 15px;
          line-height: 1.6;
          box-shadow: 0 4px 12px rgba(49, 190, 255, 0.2);
          transition: all 0.3s ease;

          &:hover {
            box-shadow: 0 6px 16px rgba(49, 190, 255, 0.3);
            transform: translateY(-1px);
          }
        }
      }
    }
  }
}

@keyframes thinking {
  0%,
  20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60%,
  100% {
    content: "...";
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes wave {
  0%,
  100% {
    height: 6px;
  }
  50% {
    height: 20px;
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes coreGlow {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(49, 190, 255, 0.6),
      0 0 40px rgba(49, 190, 255, 0.3);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 30px rgba(49, 190, 255, 0.8),
      0 0 60px rgba(49, 190, 255, 0.5);
  }
}

@keyframes textPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 引用标记样式 */
:deep(.reference-mark) {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  margin: 0 2px;

  svg {
    width: 16px;
    height: 16px;
    color: #31beff;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 4px rgba(49, 190, 255, 0.3));
  }

  &:hover svg {
    color: #62fcff;
    transform: translateY(-2px) scale(1.1);
    filter: drop-shadow(0 0 8px rgba(49, 190, 255, 0.6));
  }

  .reference-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(
      135deg,
      rgba(15, 33, 71, 0.98) 0%,
      rgba(15, 33, 71, 0.95) 100%
    );
    border: 1px solid rgba(49, 190, 255, 0.4);
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 250px;
    max-width: 400px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(49, 190, 255, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    backdrop-filter: blur(10px);
    pointer-events: none;

    /* 箭头 */
    &::before {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(49, 190, 255, 0.4);
    }

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: rgba(15, 33, 71, 0.98);
      margin-top: -1px;
    }

    .tooltip-title {
      color: #31beff;
      font-family: "Alibaba PuHuiTi", "PingFang SC", sans-serif;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(49, 190, 255, 0.2);
      line-height: 1.4;
    }

    .tooltip-content {
      color: rgba(246, 249, 254, 0.9);
      font-family: "Alibaba PuHuiTi", "PingFang SC", sans-serif;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.6;
      max-height: 200px;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-track {
        background: rgba(49, 190, 255, 0.05);
        border-radius: 2px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(49, 190, 255, 0.3);
        border-radius: 2px;

        &:hover {
          background: rgba(49, 190, 255, 0.5);
        }
      }
    }
  }

  &:hover .reference-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
  }
}
</style>
